<template>
  <div class="detail">
    <div class="header">
      <div class="header_left">
        <dl>
          <dt>
            <img
              :src="detailList.url"
              alt=""
            >
          </dt>
          <dd>
            <h1>{{ detailList.title }}</h1>
            <span>开播时间:&nbsp;{{ detailList.begin }}</span>
            <span>结束时间:&nbsp;{{ detailList.finish }}</span>
            <span>直播时长:&nbsp;{{ detailList.duration }}</span>
            <span>主播人： &nbsp; &nbsp;{{ detailList.name }}</span>
          </dd>
        </dl>
      </div>
      <div class="header_center" />
      <div class="header_right">
        <p>
          <svg-icon
            icon-class="chz-watch"
            class="icon"
          />
          <span>观看人数</span>
          <span>{{ detailList.watch }} 人</span>
        </p>
        <p>
          <svg-icon
            icon-class="chz-people"
            class="icon"
          />
          <span>最高在线人</span>
          <span>{{ detailList.highest }} 人</span>
        </p>
        <p>
          <svg-icon
            icon-class="chz-fans"
            class="icon"
          />
          <span>新增粉丝</span>
          <span>{{ detailList.newly }} 人</span>
        </p>
        <p>
          <svg-icon
            icon-class="chz-buy"
            class="icon"
          />
          <span>购买人数</span>
          <span>{{ detailList.shopping }} 人</span>
        </p>
      </div>
    </div>
    <div class="main">
      <EchartsOne />
      <EchartsTwo />
    </div>
    <div class="footer">
      <h1>销售商品分析</h1>
      <el-table
        :data="shopList"
        border
        style="width: 100%"
        header-align="right"
      >
        <el-table-column
          prop="shopId"
          label="商品ID"
          width="180"
          align="center"
        />
        <el-table-column
          label="商品图片"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <img
              :src="scope.row.shopImg"
              alt=""
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="shopName"
          label="商品名称"
          align="center"
        />
        <el-table-column
          prop="shopPrice"
          label="商品价格"
          align="center"
        />
        <el-table-column
          prop="shopGg"
          label="商品规格"
          align="center"
        />
        <el-table-column
          prop="clickNum"
          label="点击次数"
          align="center"
        />
        <el-table-column
          prop="orderNum"
          label="下单次数"
          align="center"
        />
      </el-table>
      <div class="el_container">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :current-page="pageIndex"
          :page-size="pageSize"
          @current-change="getDetailList"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {getLiveDetail} from '../../../../api/live'
import EchartsOne from "./components/LineChartOne";
import EchartsTwo from "./components/LineChartTwo";
export default {
  components: { EchartsOne, EchartsTwo },
  data() {
    return {
      detailList: {},
      pageIndex: 1,
      pageSize: 5,
      total: null,
      shopList: [],
    };
  },
  created() {
    this.getDetailList(1);
  },
  methods: {
    getDetailList(ind) {
      this.pageIndex = ind;
        getLiveDetail({
          id: this.$route.params.id,
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
        })
        .then((res) => {
          console.log(res);
          if (res.code === 20000) {
            this.detailList = res.data;
            this.total = res.total;
            this.shopList = res.shopList;
          }
        });
    },
  },
};
</script>

<style lang='scss'>
@import "./css/detail.scss";
</style>
